<template>
	<view class="container">
		<BsinTitle :text="resDaoTaskDetail.taskName || resDaoTaskDetail.name"></BsinTitle>
		<u-line></u-line>
		<view class="detail_description">
			{{resDaoTaskDetail.description || resDaoTaskDetail.name}}
		</view>
		<view class="detail_time">
			截至日期：{{resDaoTaskDetail.startTime}} — {{resDaoTaskDetail.endTime}}
		</view>
		<u-line></u-line>
		<view class="detail_secondary">
			<view class="">
				发布人 {{resDaoTaskDetail.createBy}}
			</view>
			<view class="">
				奖金<text
					style="color: var(--echo-main-color);margin: 0 10rpx;">{{resDaoTaskDetail.incentiveAmount}}</text>{{resDaoTaskDetail.ccy}}原力
			</view>
		</view>
		<u-line></u-line>
		<view class="info_approve_content">
			<view class="">
				<view class="">合约地址</view>
				<view class="info_approve_contract">
					<span class="info">
						cfxtest:achrvxc7x4fm8dzujm07rebr3hra7ps5ce3y2zmhr9
					</span>
					<span class="icon" @click="copyContract">
						<image style="width: 20px;height: 20px;" src="../static/images/my/copy.png"></image>
					</span>
				</view>
			</view>
		</view>
		<view class="under_box">
			<!-- 任务 -->
			<template v-if="taskType == 1 && btnShow">
				<u-toast ref="uToast"></u-toast>
				<u-button :text="btnText" @click="claim(toastInfo)" color="var(--echo-main-color)" shape="circle">
				</u-button>
			</template>
			<!-- 提案 -->
			<view class="support_against_btn" v-else-if="taskType == 2 && btnShow">
				<view class="btn_box against_btn">反对</view>
				<view class="btn_box support_btn">支持</view>
			</view>
			<!--  选举投票 -->
			<template v-else v-else-if="taskType == 3 && btnShow">
				<BsinVote :animationData="animationData" :voteOptionList="voteOptionList" @selectVote="selectVote">
				</BsinVote>
				<view class="bottom_btn">
					<view class="participate_btn">
						<u-button text="去参选" color="var(--echo-main-color)" shape="circle">
						</u-button>
					</view>
					<view class="submit_btn">
						<u-button text="提交" color="var(--echo-main-color)" shape="circle">
						</u-button>
					</view>
				</view>
			</template>
		</view>
		<!-- 过渡动画 -->
		<AnimationModal ref="animation"></AnimationModal>
	</view>
</template>

<script>
	import {
		reqDaoTaskDetails,
		claimTask
	} from '@/config/task.js'
	import {
		getProposalDetail
	} from '@/config/proposal.js'
	import {
		getElectionDetail
	} from '@/config/election.js'
	export default {
		data() {
			return {
				toastInfo: {
					type: 'default',
					message: "您持有的se不足，无法认领",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
				},
				// 任务详情
				resDaoTaskDetail: {},
				taskId: '',
				btnShow: true,
				btnText: '领取',
				// 任务类型
				taskType: '',
				// 投票选项
				voteOptionList: [],
				// 动画效果
				animationData: []
			}
		},
		/**
		 * type
		 * 1任务 2提案 3投票
		 */
		async onLoad({
			type,
			serialNo
		}) {
			this.taskId = serialNo;
			console.log(type, serialNo);
			this.taskType = type
			if (this.taskType == 3) {
				// 加载投票动画
				this.loadAnimationData()
			}
			if (this.taskType == 1) {
				// 任务详情
				this.resDaoTaskDetail = (await reqDaoTaskDetails({
					serialNo
				})).data
			} else if (this.taskType == 2) {
				// 提案详情
				this.resDaoTaskDetail = (await getProposalDetail({
					serialNo
				})).data
			} else if (this.taskType == 3) {
				// 选举详情
				this.resDaoTaskDetail = (await getElectionDetail({
					serialNo
				})).data
				this.voteOptionList = this.resDaoTaskDetail.electionOption
			}
		},
		methods: {
			async claim(params) {
				// 调用接口领取任务 claimTask
				var serialNo = this.taskId;
				this.$refs.animation.modalShow = true
				var res = await claimTask({
					serialNo
				});
				this.btnShow = false
				this.$refs.animation.modalShow = false
				console.log(res)
				if (res.code !== '000000') {
					this.$refs.uToast.show({
						...params,
						complete() {
							params.url && uni.navigateTo({
								url: params.url
							})
						}
					})
				} else {
					this.$refs.uToast.show({
						message: "领取成功"
					})
				}

			},

			selectVote(item) {
				let vtList = this.voteOptionList;
				vtList.forEach(v => {
					v.selected = false;
				});
				item.selected = true;
			},

			loadAnimationData() {
				// 创建一个动画实例
				var animation = uni.createAnimation({
					duration: 1000
				});
				this.animation = animation;
				let vtList = this.voteOptionList;
				for (let i = 0; i < vtList.length; i++) {
					animation.width(vtList[i].percent).step();
					this.animationData[i] = animation.export();
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx;
		color: #777;

		.detail_title {
			padding: 30rpx;
			color: #333;
		}

		.detail_description {
			padding: 30rpx;
		}

		.detail_time {
			padding: 0rpx 30rpx 30rpx 30rpx;
		}

		.detail_secondary {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx;
		}

		// 底部按钮
		.under_box {
			position: fixed;
			padding: 40rpx;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: #f8f9fa;
			border-top: 0.5px solid #dee2e6;
			box-sizing: border-box;


			// 支持反对
			.support_against_btn {
				display: flex;
				justify-content: space-between;

				.btn_box {
					width: 48%;
					box-sizing: border-box;
					height: 80rpx;
					text-align: center;
					line-height: 80rpx;
					color: #fff;
				}



				.against_btn {
					background-color: #f56c6c;
					border-top-left-radius: 100rpx;
					border-bottom-left-radius: 100rpx;
				}

				.support_btn {
					background-color: $echo-main-color;
					border-top-right-radius: 100rpx;
					border-bottom-right-radius: 100rpx;
				}
			}

			.bottom_btn {
				display: flex;

				.submit_btn {
					flex-grow: 8;
					margin-left: 10px
				}

				.participate_btn {
					flex-grow: 1
				}
			}
		}

		.info_approve_content {
			background-color: $echo-nft-card-bg-color;
			padding: 30rpx;
			border-bottom-left-radius: 10rpx;
			border-bottom-right-radius: 10rpx;
			overflow: hidden;
			margin-bottom: 30rpx;

			.info_approve_contract {
				span {
					display: inline-block;
				}

				.info {
					width: 400rpx;
					/*1.强制不换行*/
					white-space: nowrap;
					/*2.溢出隐藏*/
					overflow: hidden;
					/*3.超出部分用省略号表示*/
					text-overflow: ellipsis;
				}
			}

			&>view {
				display: flex;
				justify-content: space-between;
				font-size: 28rpx;
			}

			&>view:first-child {
				margin-bottom: 30rpx;
			}
		}

	}
</style>
